<template>
  <div>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="常用组件" name="1">
        <el-tag type="success" @click="add('buttonComponents')"> 按钮 </el-tag>
        <el-tag type="info">图片</el-tag>
        <el-tag type="warning">文本</el-tag>
      </el-collapse-item>
      <el-collapse-item title="排版" name="2">
        <el-tag type="success">横向标签</el-tag>
        <el-tag type="info">纵向标签</el-tag>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script lang="ts">
  // 在vue2中 data 在vue3中使用 reactive代替
  import { reactive, computed, createApp, toRefs } from 'vue'
  export default {
    // setup相当于vue2.0的 beforeCreate和 created，是vue3新增的一个属性，所有的操作都在此属性中完成
    setup(props: any, context: any) {
      // 通过reactive 可以初始化一个可响应的数据，与Vue2.0中的Vue.observer很相似
      const state = reactive({
        activeNames: ['1'], // 切换面板的默认张开页面
      })

      // 组件回调
      const handleChange = (val: any) => {
        console.log(val)
      }
      // 修改待办状态
      const handleChangeStatus = (item: { done: any }, status: any) => {
        item.done = status
      }
      const add = (type: string) => {
        context.emit('change', type)
      }

      // 在Vue3.0中，所有的数据和方法都通过在setup 中 return 出去，然后在template中使用
      return {
        ...toRefs(state),
        handleChange,
        add
      }
    },
  }
</script>
<style scoped>
  .container {
    display: flex;
  }
  .left-group,
  .right-group {
    width: 200px;
    background-color: #7ecff2;
    text-align: center;
  }
  .mid-group {
    flex: 1;
    background-color: #ff5000;
    text-align: center;
  }
</style>
